{% extends 'base.html' %}

{% block extrahead%}
<style type="text/css">
#map
{
    width:940px;
    height:400px;
    margin:0 auto;
    clear:both;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/dojo/1.5/dojo/dojo.xd.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
dojo.addOnLoad(function(){
    var wmsOptions = {
        tileSize: new google.maps.Size(256, 256),
        opacity: 0.5,
        isPng: true,
        getTileUrl: function(coord, zoom) {
            return 'http://vishfulthinking.appspot.com/wmstiles/google/' + zoom + '/' + coord.x + '/' + coord.y + '?layers=0,1,2&styles=,,&srs=EPSG:102113';
        }
    };
    var wmsMapType = new google.maps.ImageMapType(wmsOptions);
    
    var myOptions = {
      zoom: 4,
      center: new google.maps.LatLng(37.597, -77.444),
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map(document.getElementById("map"), myOptions);
    map.overlayMapTypes.insertAt(0, wmsMapType);
});
</script>
{% endblock %}

{% block content %}
<div id='map'></div>
{% endblock %}